# Define Dash app
app = dash.Dash(__name__)
# Define available x-axis variables
x_columns = ['DTR', 'FD', 'PRCPTOT',
'R10mm', 'R20mm', 'R5mm', 'Rx1day', 'Rx5day', 'SDII', 'SU', 'TN10p',
'TN90p', 'TNn', 'TNx', 'TR', 'TX10p', 'TX90p', 'TXn', 'TXx', 'n_maxdy',
'n_mindy', 'n_rain'] # Add your actual column names here
# Define app layout
app.layout = html.Div([
html.H1("Data Visualization"),
# Dropdown for selecting x column
html.Div([
html.Label("Select Indices:"),
dcc.Dropdown(
id='x-column-dropdown',
options=[{'label': col, 'value': col} for col in x_columns],
value=x_columns[0]
),
], style={'width': '48%', 'display': 'inline-block'}),
# Radio button for selecting monthly or yearly data
html.Div([
html.Label("Select Data Type:"),
dcc.RadioItems(
id='data-type-radio',
options=[
{'label': 'Monthly', 'value': 'monthly'},
{'label': 'Yearly', 'value': 'yearly'}
],
value='yearly',
labelStyle={'display': 'inline-block'}
),
], style={'width': '48%', 'display': 'inline-block'}),
# Radio button for selecting month (conditionally shown)
html.Div([
html.Label("Select Month:"),
dcc.RadioItems(
id='month-radio',
options=[], # Placeholder for dynamically populated options
value='', # Placeholder for the selected value
labelStyle={'display': 'inline-block'}
),
], id='month-radio-container', style={'width': '48%', 'display': 'none'}), # Initially hidden
# Dropdown for selecting station_id
html.Div([
html.Label("Select Station ID:"),
dcc.Dropdown(
id='station-dropdown',
options=[{'label': station, 'value': station} for station in df_month_location['station_id'].unique()],
value=df_month_location['station_id'].unique()[0]
),
], style={'width': '48%', 'display': 'inline-block'}),
# Dropdown for selecting season
html.Div([
html.Label("Select Season:"),
dcc.Dropdown(
id='season-dropdown',
options=[{'label': season, 'value': season} for season in df_season_location['season'].unique()],
value=df_season_location['season'].unique()[0]
),
], style={'width': '48%', 'display': 'inline-block'}),
# Line graph
dcc.Graph(id='line-plot'),
# Description of selected x-column
html.Div(id='x-column-description', style={'margin-top': '20px'})
])
# Callback to dynamically populate the month radio button options based on the selected data type
@app.callback(
Output('month-radio', 'options'),
[Input('data-type-radio', 'value')]
)
def update_month_options(selected_type):
if selected_type == 'monthly':
# Fetch unique months from df_month_location DataFrame
months = df_month_location['month'].unique()
# Create options for the radio button
month_options = [{'label': str(month), 'value': month} for month in months]
return month_options
else:
return []
# Callback to dynamically show/hide the month radio button based on the selected data type
@app.callback(
Output('month-radio-container', 'style'),
[Input('data-type-radio', 'value')]
)
def toggle_month_radio(selected_type):
if selected_type == 'monthly':
return {'width': '48%', 'display': 'inline-block'}
else:
return {'display': 'none'}
# Callback to update line plot based on dropdown selections
@app.callback(
Output('line-plot', 'figure'),
[Input('x-column-dropdown', 'value'),
Input('data-type-radio', 'value'),
Input('month-radio', 'value')]
)
def update_line_plot(selected_x, selected_type, selected_month):
# Your logic to update the plot based on the selected data type and month
pass
# Callback to update description of selected x-column
@app.callback(
Output('x-column-description', 'children'),
[Input('x-column-dropdown', 'value')]
)
def update_x_column_description(selected_indices):
# Dictionary containing descriptions of x-columns
x_column_descriptions = {
'PRCPTOT': 'Annual total precipitation from days ≥1 mm',
'R10mm': 'Annual count when precipitation ≥10 mm',
'R20mm': 'Annual count when precipitation ≥20 mm',
'R5mm': 'Annual count when precipitation ≥5 mm',
'Rx1day':'Annual maximum 1-day precipitation',
'Rx5day':'Annual maximum consecutive 5-day precipitation',
'SDII':'Ratio of annual total precipitation to number of wet days (≥1 mm)',
'SU':'Annual count when the max temperature >25 C',
'TNn':'Min value of daily min temperature during period of interest',
'TNx':'Max value of daily min temperature during period of interest',
'TR':'Counting no. of times when daily min temperature > 20 C',
'TX10p':'xyz',
'TX90p':'xyz1',
'TXn':'the min value of daily max temperature (TX) during the period of interest',
'TXx':'the maximum value of daily maximum temperature',
'n_maxdy': 'abc',
'n_mindy':'abcd',
'n_rain':'abcde',
'FD':'counting the number of days when the min temperature was less than 0°C',
'DTR':'Avg difference between the max and min temperature during period of interest'
}
# Get the description for the selected x-column
description = x_column_descriptions.get(selected_indices, "No description available")
return description
# Run the app
if __name__ == '__main__':
app.run_server(port=8501, debug=True)
